<template>
  <s-layout title="快捷绑卡">
    <view class="fask-box">
      <view class="goods-info ss-p-t-50 ss-p-b-30">
        <view class="ss-flex-col ss-col-center ss-m-b-50">
          <view class="ss-font-32">订单金额(元)</view>
          <view class="ss-font-40 ss-m-t-10">{{ state.pay_fee }}</view>
        </view>
        <view class="ss-flex ss-row-between ss-p-20 ss-font-30">
          <view :style="{ color: 'rgba(0,0,0,.4)' }">商户名称</view>
          <view>{{ state.merchant }}</view>
        </view>
        <view class="ss-flex ss-row-between ss-p-20 ss-font-30">
          <view :style="{ color: 'rgba(0,0,0,.4)' }">订单编号</view>
          <view>{{ state.order_sn }}</view>
        </view>
        <view class="ss-flex ss-row-between ss-p-20 ss-font-30">
          <view :style="{ color: 'rgba(0,0,0,.4)' }">订单时间</view>
          <view>{{ state.order_time }}</view>
        </view>
      </view>
      <uni-forms
        ref="orderRef"
        :model-value="orderForm"
        :rules="orderRules"
        label-position="left"
        border
      >
        <view class="bg-white ss-m-t-30 ss-p-l-20 ss-p-r-20">
          <uni-forms-item name="card_id" label="银行卡号">
            <uni-easyinput
              v-model="orderForm.card_id"
              placeholder="请输入银行卡号"
              :input-border="false"
              type="number"
              :maxlength="19"
              clearable
              @blur="getBankInfo"
              @clear="getBankInfo"
            />
          </uni-forms-item>
        </view>
        <view
          v-if="bankInfo.bank_name"
          class="bg-white ss-m-t-30 ss-p-t-30 ss-p-b-30 ss-p-l-20 ss-p-r-20"
        >
          {{ bankInfo.bank_name }}
        </view>
        <view class="bg-white ss-m-t-30 ss-p-l-20 ss-p-r-20">
          <uni-forms-item name="card_name" label="姓名">
            <uni-easyinput
              v-model="orderForm.card_name"
              placeholder="请输入姓名"
              :input-border="false"
              :maxlength="20"
              clearable
            />
          </uni-forms-item>
          <uni-forms-item name="cert_id" label="身份证号">
            <uni-easyinput
              v-model="orderForm.cert_id"
              placeholder="请输入身份证号"
              :input-border="false"
              :maxlength="18"
              clearable
            />
          </uni-forms-item>
          <uni-forms-item name="card_mp" label="手机号">
            <uni-easyinput
              v-model="orderForm.card_mp"
              placeholder="请输入手机号"
              :input-border="false"
              type="number"
              :maxlength="11"
              clearable
            />
          </uni-forms-item>
        </view>
      </uni-forms>
      <su-fixed bottom placeholder bg="none">
        <view class="footer-box ss-p-20">
          <button class="ss-rest-button logout-btn" @tap="onSubmit">确认绑定</button>
        </view>
      </su-fixed>
    </view>
    <Fask-sms-modal v-model="state.smsModal" :order="newOrder" />
  </s-layout>
</template>
<script setup>
import { ref, reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import sheep from "@/sheep";
import FaskSmsModal from "./components/fask-sms-modal.vue";

const orderRef = ref(null);
const state = reactive({
  pay_fee: "", // 订单金额
  order_sn: "", // 订单编号
  order_time: "", // 订单时间
  merchant: "成都本草之源生物科技有限公司", // 商户名称
  smsModal: false, // 短信验证码弹窗
});
const bankInfo = reactive({
  // 银行卡信息
  bank_name: "", // 银行名称
});
const orderForm = reactive({
  order_sn: "", // 订单编号
  card_id: "", // 银行卡号
  card_name: "", // 姓名
  cert_id: "", // 身份证号
  card_mp: "", // 手机号码
});
const orderRules = reactive({
  card_id: {
    rules: [
      {
        required: true,
        errorMessage: "请输入银行卡号",
      },
      {
        minLength: 15,
        maxLength: 19,
        errorMessage: "银行卡号长度在 {minLength} - {maxLength} 位",
      },
    ],
  },
  card_name: {
    rules: [
      {
        required: true,
        errorMessage: "请输入姓名",
      },
    ],
  },
  cert_id: {
    rules: [
      {
        required: true,
        errorMessage: "请输入身份证号",
      },
      {
        pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}(\d|X|x)$/,
        errorMessage: "身份证号格式不正确",
      },
    ],
  },
  card_mp: {
    rules: [
      {
        required: true,
        errorMessage: "请输入手机号码",
      },
      {
        pattern: /^1[3456789]\d{9}$/,
        errorMessage: "手机号码格式不正确",
      },
    ],
  },
});
const newOrder = ref({}); // 创建订单信息

onLoad((e) => {
  state.order_sn = e.order_sn;
  state.pay_fee = e.pay_fee;
  state.order_time = e.order_time;
});

// 获取银行信息
const getBankInfo = () => {
  sheep.$api.pay.bankbinInfo({ card_id: orderForm.card_id }).then((res) => {
    console.log(res);
    if (typeof res.data === "object") {
      bankInfo.bank_name = res.data.bank_name;
    } else {
      bankInfo.bank_name = "";
    }
  });
};

// 发送短信
const onSubmit = () => {
  orderRef.value
    .validate()
    .then(() => {
      sheep.$api.pay.quickbuckleApply(orderForm).then((res) => {
        const { order_sn, trans_id } = res.data;
        const { card_id, card_name, cert_id, card_mp } = orderForm;
        newOrder.value = {
          order_sn, // 订单编号
          card_id, // 银行卡号
          card_name, // 姓名
          cert_id, // 身份证号
          card_mp, // 手机号码
          trans_id, // 交易流水号
          verify_code: "", // 验证码
        };
        state.smsModal = true;
      });
    })
    .catch(() => {});
};
</script>

<style lang="scss" scoped>
.fask-box {
  width: 100%;
  height: 100vh;
  background: #f7f8fa;
  .goods-info {
    width: 100%;
    background: #fff;
  }
}
button {
  color: #fff;
  background-color: #0d6eff;
}
</style>
